<div class="card widget">
    <img src="__STATIC__/index/picture/profile-bg.jpg" alt="XiaoFeng background-image" />
    <div class="card-body little-profile">
        <div class="pro-img">
            <img src="__STATIC__/index/picture/touxiang.png" alt="XiaoFeng" />
        </div>
        <h3 class="m-b-0">XiaoFeng</h3>
        <p>将心比心,以心换心.</p>
        <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=284204003&amp;site=qq&amp;menu=yes" target="_blank" class="m-t-10 btn btn-primary">
            <i class="fa fa-qq"></i> 联系我</a>
        <div class="data">
            <div class="box">
                <h3 class="m-b-0 font-light" id="ArtNum"></h3>
                <small>文章</small>
            </div>
            <div class="box">
                <h3 class="m-b-0 font-light" id="ComNum"></h3>
                <small>评论</small>
            </div>
            <div class="box">
                <h3 class="m-b-0 font-light" id="BroNum"></h3>
                <small>浏览</small>
            </div>
        </div>
    </div>
</div>
<div class="widget three_to_one" id="tab">
    <div class="tab-nav j-tab-nav">
        <a href="javascript:void(0);" class="current"><i class="fa fa-paper-plane"></i> 最近更新</a>
        <a href="javascript:void(0);"><i class="fa fa-fire"></i> 热门文章</a>
        <a href="javascript:void(0);"><i class="fa fa-flag"></i> 站长推荐</a>
    </div>
    <div class="tab-con">
        <div class="j-tab-con">
            <div id="ArtNew" class="tab-con-item function" style="display:block;">
                <!--最新文章-->
            </div>
            <div id="ArtHot" class="tab-con-item function">
                <!--最热文章-->
            </div>
        </div>
    </div>
</div>
<div class="widget divComments">
    <div class="widget-title">
        <div class="w-t">
            <i class="fa fa-comments"></i> 最新留言
        </div>
    </div>
    <div class="function">
        <ul id="CommentNew">
            <!--最新评论-->
        </ul>
    </div>
</div>
<div class="widget divTags">
    <div class="widget-title">
        <div class="w-t">
            <i class="fa fa-tags"></i> 标签列表
        </div>
    </div>
    <div id="label" class="function">
        <!--标签列表-->
    </div>
</div>

<script>
    /*加载完成*/
    $(document).ready(function() {
        selArtNew();/*最新文章*/
        selArtHot();/*热门文章*/
        selCommentNew();/*最新评论*/
        selLabel();/*标签列表*/
        statistics();/*统计数量*/
    });

    /*最新文章*/
    function selArtNew() {
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "{:url('index/selArtNew')}",
            data: {},
            success: function (res) {
                var html = '';
                for (var i=0;i<res.data.list.length;i++) {
                    html += '<li><em class="li-icon li-icon-1">'+(i+1)+'</em><a href="index/page/article_id/"'+res.data.list[i].article_id+'>'+res.data.list[i].art_title+'</a></li>';
                }
                $("#ArtNew").html(html);
            },
            error: function () {
                console.log("异常");
            }
        });
    }

    /*热门文章*/
    function selArtHot() {
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "{:url('index/selArtHot')}",
            data: {},
            success: function (res) {
                var html = '';
                for (var i=0;i<res.data.list.length;i++) {
                    html += '<li><em class="li-icon li-icon-1">'+(i+1)+'</em><a href="index/page/article_id/"'+res.data.list[i].article_id+'>'+res.data.list[i].art_title+'</a></li>';
                }
                $("#ArtHot").html(html);
            },
            error: function () {
                console.log("异常");
            }
        });
    }

    /*最新评论*/
    function selCommentNew() {
        var static = "__STATIC__";
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "{:url('index/selCommentNew')}",
            data: {},
            success: function (res) {
                console.log(res);
                var html = '';
                for (var i=0;i<res.data.list.length;i++) {
                    html += '<li>';
                    html += '<div class="comment-info">';
                    html +='<img src="'+static+'/index/images/touxiang.jpg" data-original="'+static+'/index/images/touxiang.jpg" class="sidebar_avatar" width="60" height="60" alt="'+res.data.list[i].comment_user+'" />'+res.data.list[i].comment_user;
                    html +='<span>'+res.data.list[i].comment_time+'</span>';
                    html +='</div>';
                    html +='<div class="comment-excerpt">';
                    html +='<p><a href="#">'+res.data.list[i].comment+'</a></p>';
                    html +='</div>';
                    html +='</li>';
                }
                $("#CommentNew").html(html);
            },
            error: function () {
                console.log("异常");
            }
        });
    }

    /*标签列表*/
    function selLabel() {
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "{:url('index/selLabel')}",
            data: {},
            success: function (res) {
                console.log(res);
                var html = '';
                for (var i=0;i<res.data.list.length;i++) {
                    html += '<a href="#" title="'+res.data.list[i].label_name+'">'+res.data.list[i].label_name+'</a>';
                }
                $("#label").html(html);
            },
            error: function () {
                console.log("异常");
            }
        });
    }
    
    /*统计数量*/
    function statistics() {
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "{:url('index/statistics')}",
            data: {},
            success: function (res) {
                $('#ArtNum').html(res.data.artNum);
                $('#ComNum').html(res.data.comNum);
                $('#BroNum').html(res.data.broNum);
            },
            error: function () {
                console.log("异常");
            }
        });
    }
</script>